import { GemsDom } from "./builder.js";
import { tabbarDict } from "./config/const.js";

export class MainSence extends GemsDom {
  render() {
    this.toggleTabbar = ({ state }, v) => {
      state.current = v;
      this.ref("header").setAttribute("title", v);
      this.ref("content").update();
    };
    this.on("toggleTabbar", this.toggleTabbar);
    this.emit("gameStart");
    this.style = `
      .self{
        position:fixed;
        top:0;
        left:0;
        width:100vw;
        height:100vh;
        background-color:#f6f6f6;
        font-size:32rem;
        display:flex;
        flex-direction: column;
      }
      .self>div{
        width:100%;
      }
      .content{
        flex:1;
        overflow:hidden;
      }
      `;
    return () => `
      <div>
        <my-header ref="header" title="${this.$state.current}">
        </my-header>
      </div>
      <div class="content">
        <my-content ref="content">
        </my-content>
      </div>
      <div>
        <my-tabbar>
        </my-tabbar>
      </div>
        `;
  }
}

export class MyHeader extends GemsDom {
  static get props() {
    return ["title"];
  }
  render() {
    this.style = `
      .self{
        text-align:center;
        background-color:#fff;
        box-shadow:0 0 2rem 1rem #eee;
        padding:8rem 0;
      }
      `;
    return () => `
      <div>
        ${this.props.title}
      </div>
      `;
  }
}

export class MyContent extends GemsDom {
  render() {
    this.style = `
      .self{
        width:100%;
        height:100%;
        font-size:20rem;
      }
      `;
    const contentDict = {
      [tabbarDict.L]: "<content-player></content-player>",
      [tabbarDict.M]: "<content-main></content-main>",
      [tabbarDict.R]: "<content-rank></content-rank>",
    };
    return () => `
      ${contentDict[this.$state.current]}
      `;
  }
}

export class MyTabbar extends GemsDom {
  static get props() {
    return [];
  }
  data = {
    tabbar: Object.values(tabbarDict).map((o) => ({ label: o, value: o })),
  };
  render() {
    this.style = `
      .self{
        box-shadow:0 0 2rem 1rem #eee;
        background-color:#fff;
        font-size:26rem;
        display:grid;
        grid-template-columns: repeat(3,1fr);
        justify-items:center;
        padding-bottom:10rem;
      }
      .item{
        width:100%;
        padding:10rem 0;
        text-align:center;
        color:#666;
      }
      .item.active{
        color:#000;
        text-shadow:0 0 5rem #ff0;
        position:relative;
      }
      `;
    this.toggleActive = () => {
      const items = this.refs("item");
      items.forEach((item) => {
        item.classList.toggle(
          "active",
          Var.isEqual(this.$state.current, item.dataset.value)
        );
      });
    };
    this.handle(() => {
      this.toggleActive();
      this.refs("item").forEach((item) => {
        item.addEventListener("click", (e) => {
          const { value } = e.target.dataset;
          if (Var.isEqual(value, this.$state.current)) return;
          this.emit("toggleTabbar", value);
          this.toggleActive();
        });
      });
    });
    return () => {
      return this.data.tabbar
        .map(
          ({ label, value }) =>
            `<div ref="item" class="item" data-value="${value}">${label}</div>`
        )
        .join("");
    };
  }
}

export class ContentPlayer extends GemsDom {
  render() {
    return () => `角色`;
  }
}

export class ContentRank extends GemsDom {
  render() {
    return () => `排行榜`;
  }
}
